<template>
  <div class="w-1000px m-auto mt-20px mb-10px">
    <Descriptions bordered :column="1" :labelStyle="{ width: '400px', textAlign: 'right' }">
      <template #title>
        <div style="text-align: center"> 系统变量 </div>
      </template>
      <DescriptionsItem label="服 务 器"><Input v-model:value="dataRef.server" /></DescriptionsItem>
      <DescriptionsItem label="端口"><Input v-model:value="dataRef.port" /></DescriptionsItem>
      <DescriptionsItem label="调试状态"
        ><Select v-model:value="dataRef.debug" :options="yesOrno" style="width: 100%"
      /></DescriptionsItem>
      <DescriptionsItem label="虚拟路径"
        ><Input v-model:value="dataRef.virtualPath"
      /></DescriptionsItem>
      <DescriptionsItem label="真实路径"
        ><Input v-model:value="dataRef.realPath" addon-after="( 请使用 / 符号 )" />
      </DescriptionsItem>
      <DescriptionsItem label="浏览器上传时单个文件的最大尺寸">
        <Input v-model:value="dataRef.fileSize" addon-after="( 单位：K )" />
      </DescriptionsItem>
      <DescriptionsItem label="服务器是否直接支持中文">
        <Select v-model:value="dataRef.requestSupportCN" :options="yesOrno" style="width: 100px" />
        ( Tomcat 默认选是，如果使用了防乱码过滤器选是，注意慎重选用，否则在提交后可能会出现乱码 )
      </DescriptionsItem>
      <DescriptionsItem label="是否启用调度">
        <Select v-model:value="dataRef.schedule" :options="yesOrno" style="width: 100%" />
      </DescriptionsItem>
      <DescriptionsItem label="系统是否正式启用">
        <Select v-model:value="dataRef.formalOpen" :options="yesOrno" style="width: 100px" />
        ( 如正式启用，则需以管理员身份登录后才能进行setup操作 )
      </DescriptionsItem>
      <DescriptionsItem label="是否启用缓存">
        <Select v-model:value="dataRef.useCache" :options="yesOrno" style="width: 100%" />
      </DescriptionsItem>
      <DescriptionsItem label="是否使用Redis">
        <Select v-model:value="dataRef.useRedis" :options="yesOrno" style="width: 100%" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis服务器">
        <Input v-model:value="dataRef.redisHost" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis端口">
        <Input v-model:value="dataRef.redisPort" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis密码">
        <Input v-model:value="dataRef.redisPassword" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis资源池中最大连接数">
        <Input v-model:value="dataRef.redisMaxTotal" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis资源池允许最大空闲的连接数">
        <Input v-model:value="dataRef.redisMaxIdle" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis资源池初始化连接数">
        <Input v-model:value="dataRef.redisMinIdle" />
      </DescriptionsItem>
      <DescriptionsItem label="Redis当资源池连接用尽后，调用者的最大等待时间，单位为毫秒">
        <Input v-model:value="dataRef.redisMaxWaitMillis" />
      </DescriptionsItem>
      <DescriptionsItem label="RediRedis db序号（0-15）s端口">
        <Input v-model:value="dataRef.redisDb" />
      </DescriptionsItem>
    </Descriptions>
    <div class="mt-2 mb-2 text-center">
      <a-button @click="handleSubmit">确定</a-button>
    </div>
    <div> 注：点击“确定”，可以重新生成登录界面的二维码（可下载APP或配置APP登录地址） </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { Descriptions, Input, Select } from 'ant-design-vue';
  const DescriptionsItem = Descriptions.Item;
  import { getAdminConfigSysPage, getAdminUpdateConfigSys } from '/@/api/system/system';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage } = useMessage();
  const dataRef = ref<Recordable>({});
  const fetch = async () => {
    dataRef.value = await getAdminConfigSysPage();
    console.log('dataRef.value', dataRef.value);
  };
  onMounted(fetch);
  const loading = ref(false);
  const handleSubmit = async () => {
    try {
      const formData = {
        'Application.server': dataRef.value.server,
        'Application.port': dataRef.value.port,
        'Application.desc': dataRef.value.desc,
        'Application.isDebug': dataRef.value.debug,
        'Application.virtualPath': dataRef.value.virtualPath,
        'Application.realPath': dataRef.value.realPath,
        'Application.FileSize': dataRef.value.fileSize,
        'Application.WebEdit.MaxSize': dataRef.value.MaxSize,
        'Application.isRequestSupportCN': dataRef.value.requestSupportCN,
        'Application.isSchedule': dataRef.value.schedule,
        'Application.isFormalOpen': dataRef.value.formalOpen,
        'Application.useCache': dataRef.value.useCache,
        'Application.isUseRedis': dataRef.value.useRedis,
        'Application.redisHost': dataRef.value.redisHost,
        'Application.redisPort': dataRef.value.redisPort,
        'Application.redisPassword': dataRef.value.redisPassword,
        'Application.redisMaxTotal': dataRef.value.redisMaxTotal,
        'Application.redisMaxIdle': dataRef.value.redisMaxIdle,
        'Application.redisMinIdle': dataRef.value.redisMinIdle,
        'Application.redisMaxWaitMillis': dataRef.value.redisMaxWaitMillis,
        'Application.redisDb': dataRef.value.redisDb,
      };
      loading.value = true;
      await getAdminUpdateConfigSys(formData);
      loading.value = false;
      createMessage.success('操作成功');
      fetch();
    } catch (error) {
      loading.value = false;
    }
  };

  const yesOrno = [
    {
      label: '是',
      value: true,
    },
    {
      label: '否',
      value: false,
    },
  ];
</script>
<style lang="less" scoped>
  :deep(.ant-progress-inner) {
    border-radius: 0;
  }
</style>
